<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
<link href="assets/css/codemirror.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/paging.css" />
<script src="assets/js/jquery.min.js"></script>

<script type="text/javascript">
	window.jQuery
			|| document.write("<script src='assets/js/jquery-2.0.3.min.js'>"
					+ "<"+"/script>");
</script>
<script type="text/javascript">
	if ("ontouchend" in document)
		document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"
				+ "<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/typeahead-bs2.min.js"></script>
<!-- page specific plugin scripts -->
<script src="assets/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script src="assets/laydate/laydate.js" type="text/javascript"></script>
<title>用户列表</title>
</head>

<body>
	<div class="page-content clearfix">
		<div id="Member_Ratings">
			<div class="d_Confirm_Order_style">
				<form action="userQuery.do">
					<div class="search_style">
						<ul class="search_content clearfix">
							<li><label class="l_f">用户名称</label> <input name="key"
								type="text" class="text_add" placeholder="输入用户名"
								style="width: 400px" /></li>
							<li style="width: 90px;"><button class="btn_search">
							<i class="icon-search"></i>查询</button></li>
						</ul>
					</div>
					</form>
				
				<!---->
				<div class="border clearfix">
					<span class="l_f"> <a href="user_add.html" id="member_add"
						class="btn btn-warning"><i class="icon-plus"></i>添加用户</a> <a
						href="javascript:if(confirm('确认删除吗?'))window.location='userDelete.do?userId=${list.userId}'" class="btn btn-danger"><i
							class="icon-trash"></i>批量删除</a>
					</span> <span class="r_f">共：<b>2345</b>条
					</span>
				</div>
				<!---->
				<div class="table_menu_list">
					<table class="table table-striped table-bordered table-hover"
						id="sample-table">
						<thead>
							<tr>
								<th width="25"><label><input type="checkbox" class="ace">
									<span class="lbl"></span></label></th>
								<th width="80">序号</th>
								<th width="80">ID</th>
								<th width="100">用户名</th>
								<th width="80">性别</th>
								<th width="120">手机</th>
								<th width="100">生日</th>
								<th width="250">操作</th>
							</tr>
						</thead>
						<tbody>
						
							<c:forEach items="${p.records }" var="list" varStatus="vs">
								<tr>
									<td><label><input type="checkbox" class="ace" /><span class="lbl"></span></label></td>
									<td>${vs.count}</td>
									<td>${list.userId}</td>
									<td>${list.userName }</td>
									<td>${list.sex=='0'?'女':'男' }</td>
									<td>${list.telephone }</td>
									<td><fmt:formatDate value="${list.birthday}" pattern="yyyy-MM-dd" /></td>
									<td class="td-manage"><a title="编辑" href="userInfo.do?userId=${list.userId}"
										class="btn btn-xs btn-info"><i
											class="icon-edit bigger-120"></i></a> 
											<a title="删除" href="javascript:if(confirm('确认删除吗?'))window.location='userDelete.do?userId=${list.userId}'"
										class="btn btn-xs btn-warning">
										<i class="icon-trash  bigger-120"></i></a></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				
			</div>
		</div>
	</div>

	<div class="page-icon">
		<c:set var="startNum" value="${p.current-5<1?1:p.current-5 }" />
		<c:set var="endNum"
			value="${p.current+5>p.getPages()? p.getPages():p.current+5 }" />
		<c:if test="${p.current!=1 }">
			<a href="javascript:void(0);" data-page="1" class="page-disabled">第一页</a>
		</c:if>
		<c:forEach begin="${startNum }" end="${p.getPages() }" var="i">
			<a href="javascript:void(0);" data-page="${i }">${i }</a>
		</c:forEach>
		<c:if test="${p.current!=p.getPages() }">
			<a href="javascript:void(0);" data-page="${p.getPages() }"
				class="page-next">最后一页</a>
		</c:if>
	</div>
	<script type="text/javascript"> 
	var pageList = document.querySelector(".page-icon").querySelectorAll("a[data-page]"); 
	console.info(pageList); 
	for(let item of pageList){ 
		console.info(item); 
		item.onclick = function(){ 
			let pNum = item.dataset.page;//获取a标签的data-page 
			let url = new URL(location.href); 
			url.searchParams.set("current",pNum); 
			location=url.toString(); 
			} 
		}
	</script>
</body>
</html>